<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>登录若依系统</title>
    <meta name="description" content="若依后台管理框架">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet" />
    <link href="../static/css/login.min.css" th:href="@{/css/login.min.css}" rel="stylesheet" />
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=4.7.9}" rel="stylesheet" />
    <!-- 360浏览器急速模式 -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}" />
    <style type="text/css">
        label.error {
            position: inherit;
        }
    </style>
    <script>
        if (window.top !== window.self) { alert('未登录或登录超时。请重新登录'); window.top.location = window.location };
    </script>
    <!--    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>-->
    <!--    <script src="../static/js/jquery.i18n.properties.min.js" th:src="@{/js/jquery.i18n.properties.min.js}"></script>-->
    <script src="../static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
    <script src="../static/js/jquery.i18n.properties.js" th:src="@{/js/jquery.i18n.properties.js}"></script>
    <script th:inline="javascript">
        //获取应用路径
        var ROOT = [[${ #servletContext.contextPath }]];

        //获取默认语言
        var LANG_COUNTRY = [[${ #locale.language + '_' + #locale.country }]];
        // LANG_COUNTRY = 'en_US';

        // console.log($)
        // console.log($.i18n)
        // $.i18n 丢失, 看下是否加载了, 或者加载被覆盖了, 加载 jquery.js 会覆盖 jquery.i18n
        //初始化i18n插件
        // 这里会请求数据, i18n/messages_zh_CN.properties?_=1733155763130
        // 将数据存储到 i18n中， 通过i18n.prop(key)取
        let i18nExecute = function () {
            if ($.i18n == undefined) return false
            $.i18n.properties({
                path: ROOT + '/i18n/',//这里表示访问路径
                name: 'messages',//文件名开头
                language: LANG_COUNTRY,//文件名语言 例如en_US
                mode: 'map',//默认值
                // debug: true,
                callback: function () {
                    /* 替换普通文本 */
                    $("[i18n]").each(function () {
                        $(this).html($.i18n.prop($(this).attr("i18n")))
                    })
                    /* 替换value属性 */
                    $("[i18n-v]").each(function () {
                        $(this).val($.i18n.prop($(this).attr("i18n-v")))
                    })
                    /* 替换placeholder属性 */
                    $("[i18n-p]").each(function () {
                        $(this).attr("placeholder", $.i18n.prop($(this).attr("i18n-p")))
                    })
                }
            });
        }


        //初始化i18n函数
        function i18nProp(msgKey) {
            try {
                return $.i18n.prop(msgKey);
            } catch (e) {
                return msgKey;
            }
        }
        $(function () {
            i18nExecute()
            //     console.log($.i18n)
            //获取国际化翻译值
            console.log(i18nProp('user.login.username'));
            console.log(i18nProp('user.login.password'));
            console.log(i18nProp('user.login.code'));
            console.log(i18nProp('user.login.remember'));
            console.log(i18nProp('user.login.submit'));
        })
    </script>

</head>

<body class="signin">
    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <div class="logopanel m-b">
                        <h1><img alt="[ 若依 ]" src="../static/ruoyi.png" th:src="@{/ruoyi.png}"></h1>
                    </div>
                    <div class="m-b"></div>
                    <h4>欢迎使用 <strong>若依 后台管理系统</strong></h4>
                    <ul class="m-b">
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> SpringBoot</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Mybatis</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Shiro</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Thymeleaf</li>
                        <li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> Bootstrap</li>
                    </ul>
                    <strong th:if="${isAllowRegister}">还没有账号？ <a th:href="@{/register}">立即注册&raquo;</a></strong>
                </div>
            </div>
            <div class="col-sm-5">
                <form id="signupForm" autocomplete="off">
                    <h4 class="no-margins">登录：</h4>
                    <p class="m-t-md">你若不离不弃，我必生死相依</p>
                    <!--                    <input type="text"     name="username" class="form-control uname"     placeholder="用户名" value="admin"    />-->
                    <!--                    <input type="password" name="password" class="form-control pword"     placeholder="密码"   value="admin123" />-->
                    <!--					<input type="text"     name="username" class="form-control uname"     th:placeholder="#{user.login.username}" value=""   autocomplete="off" />-->
                    <input type="text" name="username" class="form-control uname" i18n-p="user.login.username" value=""
                        autocomplete="off" />
                    <input type="password" name="password" class="form-control pword" i18n-p="user.login.password" value="" autocomplete="off" />
                    <h2>i18n='user.login.username'</h2>----------
                    <span i18n='user.login.username'>1</span>
                    <div class="row m-t" th:if="${captchaEnabled==true}">
                        <div class="col-xs-6">
                            <input type="text" name="validateCode" class="form-control code"
                                placeholder="#{user.login.code}" maxlength="5" />
                        </div>
                        <div class="col-xs-6">
                            <a href="javascript:void(0);" title="点击更换验证码">
                                <img th:src="@{/captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"
                                    height="50px" />
                            </a>
                        </div>
                    </div>
                    <div class="checkbox-custom" th:if="${isRemembered}"
                        th:classappend="${captchaEnabled==false} ? 'm-t'">
                        <input type="checkbox" id="rememberme" name="rememberme"> <label
                            for="rememberme">[[#{user.login.remember}]]</label>
                    </div>
                    <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍候..."
                        th:text="#{user.login.submit}">[[#{user.login.submit}]]</button>
                    <!--                    <a th:href="@{?lang='zh_CN'}">中文</a> <br/>-->
                    <!--                    <a th:href="@{?lang='en_US'}">English</a>-->
                </form>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                Copyright © 2018-2024 ruoyi.vip All Rights Reserved. <br>
            </div>
        </div>
    </div>
    <script
        th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${ captchaType }]]; var captchaEnabled = [[${ captchaEnabled }]];</script>
    <!--[if lte IE 8]><script>window.location.href=ctx+'html/ie.html';</script><![endif]-->
    <!-- 全局js -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/ajax/libs/validate/jquery.validate.min.js"
        th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
    <script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script src="../static/ajax/libs/blockUI/jquery.blockUI.js"
        th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
    <script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.7.9}"></script>
    <script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
    <script src="../static/js/jquery.i18n.properties.js" th:src="@{/js/jquery.i18n.properties.js}"></script>

    <script>
        $(document).keydown(function (event) {
            if (event.keyCode === 13) {
                validateKickout();
                validateRule();
                $('.imgcode').click(function () {
                    var url = ctx + "captcha/captchaImage?type=" + captchaType + "&s=" + Math.random();
                    $(".imgcode").attr("src", url);
                });
                login();
            }
        })
    </script>
</body>

</html>